<?php $this->load->view('header');?>
<style>
	.listhead{border-top: 1px solid #e2e2e2;height: 40px;line-height: 40px;margin-top: 20px;}
	.label{background-color: #a88add; color: #fff;border-radius: 2px;padding: 2px 5px;margin-left: 20px;}
	.timelabel{text-align: center;height: 30px;line-height: 30px;margin-bottom: -10px;font-size: 1rem;}
	.layui-form-label{width: 140px;}
	#editForm{margin-top: 20px;}
	.layui-form-item .layui-input-inline{width: 420px;}
</style>

<body class="childrenBody">
    <blockquote class="layui-elem-quote news_search">
		<form class="layui-form" action="" style="display: inline;">
			<div class="layui-inline">
				<div class="layui-input-inline">
			    	<select name="venue_id" id="venue_id">
					  <option value="-1">全部场馆</option>
					  <?php foreach ($venue_list as $item):?>
					  <option value="<?=$item['id']?>"><?=$item['name']?></option>
					  <?php endforeach;?>
					</select> 
			    </div>
			    <div class="layui-input-inline">
			    	<select name="coach_id" id="coach_id">
					  <option value="-1">全部教练</option>
					  <?php foreach ($coach_list as $item):?>
					  <option value="<?=$item['id']?>"><?=$item['nickname']?></option>
					  <?php endforeach;?>
					</select> 
			    </div>

			    <div class="layui-input-inline">
			    	<select name="status" id="status">
					  <option value="-1">全部状态</option>
					  <option value="1">已签到</option>
					  <option value="0">未签到</option>
					  <option value="2">已取消</option>
					</select> 
			    </div>
			    <div class="layui-inline">
			      <div class="layui-input-inline">
			        <input type="text" class="layui-input" id="test1" placeholder="选择查询时间">
			      </div>
			    </div>
			    <div class="layui-input-inline">
			    	<input type="text" name="keyword" value="" placeholder="搜手机、姓名" class="layui-input search_input">
			    </div>
			    <a class="layui-btn layui-btn-normal Sear_btn"><i class="layui-icon">&#xe615;</i>查询</a>
			</div>
		</form>
	</blockquote>
	
	<!-- 视图 -->
	<div class="layui-form news_list">
		<form class="layui-form">
			<table class="layui-table" lay-even="" lay-skin="line">
			    <thead>
				<tr>
					<th>姓名</th>
					<th>电话</th>
					<th>人数</th>
					<th>会员卡</th>
					<th>课程</th>
					<th>课程类型</th>
					<th>教练</th>
					<th>场馆</th>
					<th>价格</th>
					<th>状态</th>
					<th>上课时间</th>
					<th>操作</th>					
				</tr> 
			    </thead>
				<tbody class="goods_content" id="view"></tbody>
				
			</table>
			<div class="page_box" style="float: right;padding-right: 10px;">
				<div id="listpage"></div>
			</div>
		</form>
	</div>
	

	<!-- 模板 -->
	<script id="demo" type="text/html">	
		{{#  layui.each(d.list, function(index, val){ }}
			<tr>
			  <td width='150'>
				{{#  if(val.headimg){ }}
				<img src="{{val.headimg}}" style="width: 30px;border-radius: 100%;height: 30px;">
				{{# }else{ }}
				<img src="plugins/layui/images/user_img.png" style="width: 30px;border-radius: 100%;">
				{{#  } }}&nbsp;&nbsp;{{ val.user_name }}
			  </td>
			  <td>{{ val.mobile }}</td>
			  <td>{{ val.num }}</td>			  
			  <td>{{ val.card_name }}</td>
			  <td>{{ val.course_name }}</td>
			  <td>{{ val.type_name }}</td>
			  <td>{{ val.coach_name }}</td>
			  <td>{{ val.shop_name }}</td>			  
			  <td>{{ val.price }}</td>
			  <td>{{ val.status_name }}</td>
			  <td>{{ val.sdate }} {{ val.stime }}</td>
			  <td style="width: 220px;">				
				{{#  if(val.status == 0){ }}
				<a class="layui-btn layui-btn-primary layui-btn-mini" id="clock{{ val.id }}" title="签到">
				  <i class="layui-icon">&#xe605;</i>
				</a>
				<a class="layui-btn layui-btn-primary layui-btn-mini" id="cancel{{ val.id }}" title="取消预约">
				  <i class="layui-icon">&#xe64f;</i>
				</a>
				{{#  } }}
			  </td>
			</tr>
		{{#  }); }}
		{{#  if(d.list.length === 0){ }}
	      暂无数据
	    {{#  } }} 
	</script>

	<script type="text/javascript">
	layui.config({
		version: true
	}).use(['jquery','layer', 'laytpl', 'form', 'element', 'laypage', 'laydate'],function(){
		var layer = parent.layer === undefined ? layui.layer : parent.layer,
			laytpl = layui.laytpl,
			form = layui.form,
			element = layui.element,
			laypage = layui.laypage,
			laydate = layui.laydate,
			$ = layui.jquery;

			load_list();


			//时间选择器
			var dateStr = '';
			laydate.render({
				elem: '#test1'
				,theme: '#1e9fff'
				,done:function(value, date, endDate) 
				{
					dateStr = value;
				}
			});

			//查询
			$('.Sear_btn').click(function() 
			{
				var v = $('#venue_id').val();
				var c = $('#coach_id').val();
				var s = $('#status').val();
				var k = $("input[name='keyword']").val();

				if (dateStr) 
				{
				    var mydate=new Date(dateStr);
				    var myddy=mydate.getDay();//获取存储当前日期
				    var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
				    var dt = dateStr.slice(0,5).replace(/-/,'年')+dateStr.slice(5).replace(/-/,'月')+'日';
				    $('.timelabel').html(weekday[myddy]+' | '+dt);
				}
				load_list('',v,c,s,dateStr,k);
			});


			function load_list(p,v,c,s,d,k)
			{
				$.get('admin.php/Reserve/get_list',{page:p,venue_id:v,coach_id:c,status:s,sdate:dateStr,keyword:k}, function(data) 
				{
					var getTpl = demo.innerHTML;
					laytpl(getTpl).render(data, function(html){
					  $('#view').html(html);
					});
					
					
					layui.each(data.list, function(index, el) 
					{
						//分页
						laypage.render({
						  elem: 'listpage'
						  ,count: data.count //数据总数，从服务端得到
						  ,theme: '#1E9FFF'
						  ,limit: 10
						  ,curr:p
						  ,jump: function(obj, first){
						    //首次不执行
						    if(!first){
						      load_list(obj.curr,v,c,s,d,k);
						    }
						  }
						});					
						
						
						//确认签到
						$('#clock'+el.id).click(function() 
						{
							layer.confirm('是否签到？',{icon:3, title:'提示信息'},function(index){
								$.get('admin.php/Reserve/updata_status',{id:el.id,status:1}, function(res) {
									if (res.status == 200) {
										layer.msg(res.message, {icon:1});
										location.reload();
									}
									else
									{
										layer.msg(res.message, {icon:2});
									}
								},"json");
							});
						});


						//取消预约
						$('#cancel'+el.id).click(function() 
						{
							layer.confirm('是否取消预约？',{icon:3, title:'提示信息'},function(index){
								$.get('admin.php/Reserve/updata_status',{id:el.id,status:2}, function(res) {
									if (res.status == 200) {
										layer.msg(res.message, {icon:1});
										location.reload();
									}
									else
									{
										layer.msg(res.message, {icon:2});
									}
								},"json");
							});
						});

						form.render(); //更新全部
					});
					
				},'json');

			}

	});
	</script>

</body>
</html>